<template>
  <div class="health-education-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>健康宣教管理</h2>
    </div>
    
    <!-- 查询区域 -->
    <el-card class="search-card" shadow="hover">
      <el-form :inline="true" class="search-form">
        <el-form-item label="宣教内容">
          <el-input v-model="query.MissionContent" placeholder="请输入宣教内容" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="">查询</el-button>
          <el-button @click="">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="logic.isopen = true">新增宣教</el-button>
    </div>
    
    <!-- 数据表格区域 -->
    <el-card class="data-card" shadow="hover">
      <el-table 
        :data="userdata" 
        border 
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f8f9fa', fontWeight: 'bold' }"
        :row-style="{ cursor: 'pointer' }"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="missionContent" label="宣教内容" min-width="150" show-overflow-tooltip />
        <el-table-column prop="missionType" label="宣教类别" width="180" align="center" />
        <el-table-column prop="educationTime" label="宣教日期" width="200" align="center" >
          <template v-slot="scope">
            {{ moment(scope.row.educationTime).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="educationStatus" label="状态" width="100" align="center" >
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.educationStatus == '1'">已阅读</el-tag>
            <el-tag type="primary" v-if="scope.row.educationStatus == '0'">已发送</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90" align="center">
          <template v-slot="scope">
            <el-button type="danger" @click="deletedata(scope.row.educationId)" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <div class="pagination-info">
          共 {{ paging.totalCount }} 条记录，当前第 {{ paging.PageIndex }}/{{ paging.totalPage }} 页
        </div>
        <el-pagination
          v-model:current-page="paging.PageIndex"
          v-model:page-size="paging.PageSize"
          :page-sizes="[2, 4, 6, 8,10]"
          layout="prev, pager, next, sizes, jumper"
          :total="paging.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
        />
      </div>
    </el-card>
    
  </div>

  <!-- 新增健康宣教弹窗 -->
  <el-dialog 
    v-model="logic.isopen" 
    title="新增健康宣教" 
    width="600px"
  >
    <el-form 
      :model="model" 
      label-width="100px"
    >
      <el-form-item label="宣教内容">
        <el-input v-model="model.missionContent" placeholder="请输入宣教内容" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item label="宣教类别">
        <el-select v-model="model.missionType" placeholder="请选择宣教类别">
          <el-option label="高血压宣教" value="高血压宣教" />
          <el-option label="糖尿病宣教" value="糖尿病宣教" />
          <el-option label="健康饮食" value="健康饮食" />
          <el-option label="日常监测" value="日常监测" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isopen = false">取消</el-button>
        <el-button type="primary" @click="adduser()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus';
import axios from 'axios';
import moment from 'moment';
import { ElMessageBox } from 'element-plus';
import { Write } from '@/Http/Axios';

//慢病患者人数:1234 其中：高危患者 34,低危患者 1000,中危患者 200,慢病患者人数 12

const buttons = [
  { type: 'primary', text: '管理' },
] as const

const userdata = ref([]);

const query = reactive({
    MissionContent:"",
})

const paging = reactive({
    PageIndex:1,
    PageSize:10,
    totalCount:0,
    totalPage:0
})

const getuser = () =>{
    axios.get("http://localhost:5108/api/Manager/HealthEducationList",{params:{
        MissionContent:query.MissionContent,
        PageIndex:paging.PageIndex,
        PageSize:paging.PageSize,
    }})
    .then(res=>{
        userdata.value = res.data.data.data;
        paging.totalCount = res.data.data.totalCount;
        paging.totalPage = res.data.data.totalPage;
    })
    
}

// const roledata = ref([]);

// const getrole = () =>{
//     axios.get("http://localhost:5122/api/Management/GetRole")
//     .then(res=>{
//         roledata.value = res.data.data;
//     })
    
// }

onMounted(()=>{
    getuser()
    // getrole()
})

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  paging.PageSize = val;
  getuser()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  paging.PageIndex = val;
  getuser()
}

const logic = reactive({
    isopen:false,
})

const model = reactive({
    missionContent:"",
    missionType:"",
})

const adduser = () =>{
    axios.post("http://localhost:5203/api/Managment/HealthEducationAdd",model)
    .then(res=>{
        if(res.data.code==200){
            ElMessage.success("新增成功");
            logic.isopen = false;
            getuser();
        }
        else{
            ElMessage.error("新增失败");
        }
    })
}

const deletedata = (educationId: any) => {
    ElMessageBox.confirm('确定删除该条记录吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      Write.get(`http://localhost:5203/api/Managment/HealthEductionDelete?EducationId=` + educationId)
        .then(res => {
          if (res.data.code == 300) {
            ElMessage.success('删除成功');
            getuser();
          } else {
            ElMessage.error('删除失败');
          }
        })
        .catch(() => {
          ElMessage.error('删除操作失败');
        });
    });
  };
</script>

<style scoped>
.health-education-view {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 15px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.data-card {
  border-radius: 8px;
  overflow: hidden;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .health-education-view {
    padding: 10px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pagination-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pagination {
    justify-content: center;
  }
}
</style>
